<template>
  <div class="app-container">
    <div class="grid-content bg-purple">
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检5-1</p>
          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listObjRight.type && listObjRight.type == '断电作业'"
          >
            {{ listObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listObjRight.type && listObjRight.type != '断电作业'"
          >
            {{ listObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listObjRight.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listObjRight.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listObjRight.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>

          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listObjRight.tworkRecordReVoList"
                  :key="item.id + '7'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检6-1</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listTwoObjRight.type && listTwoObjRight.type == '断电作业'"
          >
            {{ listTwoObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listTwoObjRight.type && listTwoObjRight.type != '断电作业'"
          >
            {{ listTwoObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listTwoObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listTwoObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listTwoObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listTwoObjRight.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">
              {{ listTwoObjRight.duration || "/" }}
            </div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">
              {{ listTwoObjRight.planTime || "/" }}
            </div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listTwoObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listTwoObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listTwoObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listTwoObjRight.tworkRecordReVoList"
                  :key="item.id + '8'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检7-1</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="
              listThreeObjRight.type && listThreeObjRight.type == '断电作业'
            "
          >
            {{ listThreeObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="
              listThreeObjRight.type && listThreeObjRight.type != '断电作业'
            "
          >
            {{ listThreeObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listThreeObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listThreeObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listThreeObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">
              {{ listThreeObjRight.startTime || "/" }}
            </div>
            <div class="duration">总时长：</div>
            <div class="duration-time">
              {{ listThreeObjRight.duration || "/" }}
            </div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">
              {{ listThreeObjRight.planTime || "/" }}
            </div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listThreeObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listThreeObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listThreeObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listThreeObjRight.tworkRecordReVoList"
                  :key="item.id + '9'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检8-1</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listFourObjRight.type && listFourObjRight.type == '断电作业'"
          >
            {{ listFourObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listFourObjRight.type && listFourObjRight.type != '断电作业'"
          >
            {{ listFourObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFourObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFourObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listFourObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">
              {{ listFourObjRight.startTime || "/" }}
            </div>
            <div class="duration">总时长：</div>
            <div class="duration-time">
              {{ listFourObjRight.duration || "/" }}
            </div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">
              {{ listFourObjRight.planTime || "/" }}
            </div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listFourObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listFourObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listFourObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listFourObjRight.tworkRecordReVoList"
                  :key="item.id + '10'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检9-1</p>
          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listFiveObjRight.type && listFiveObjRight.type == '断电作业'"
          >
            {{ listFiveObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listFiveObjRight.type && listFiveObjRight.type != '断电作业'"
          >
            {{ listFiveObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFiveObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFiveObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listFiveObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">
              {{ listFiveObjRight.startTime || "/" }}
            </div>
            <div class="duration">总时长：</div>
            <div class="duration-time">
              {{ listFiveObjRight.duration || "/" }}
            </div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">
              {{ listFiveObjRight.planTime || "/" }}
            </div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listFiveObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listFiveObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listFiveObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listFiveObjRight.tworkRecordReVoList"
                  :key="item.id + '11'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检10-1</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listSixObjRight.type && listSixObjRight.type == '断电作业'"
          >
            {{ listSixObjRight.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listSixObjRight.type && listSixObjRight.type != '断电作业'"
          >
            {{ listSixObjRight.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listSixObjRight.oneStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listSixObjRight.oneEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listSixObjRight.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listSixObjRight.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">
              {{ listSixObjRight.duration || "/" }}
            </div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">
              {{ listSixObjRight.planTime || "/" }}
            </div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listSixObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listSixObjRight.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listSixObjRight.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listSixObjRight.tworkRecordReVoList"
                  :key="item.id + '12'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-content bg-purple">
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检5-2</p>
          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listObj.type && listObj.type == '断电作业'"
          >
            {{ listObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listObj.type && listObj.type != '断电作业'"
          >
            {{ listObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listObj.carCode || "/" }}</div>
            <!-- <div class="check-num">SSSSSSSSSSSSS</div> -->
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="(item, index) in listObj.tworkRecordReVoList"
                  :class="classS1(item.workTeamName.length)"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listObj.tworkRecordReVoList"
                  :key="item.id + '1'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检6-2</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listTwoObj.type && listTwoObj.type == '断电作业'"
          >
            {{ listTwoObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listTwoObj.type && listTwoObj.type != '断电作业'"
          >
            {{ listTwoObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listTwoObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listTwoObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listTwoObj.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listTwoObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listTwoObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listTwoObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listTwoObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listTwoObj.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listTwoObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listTwoObj.tworkRecordReVoList"
                  :key="item.id + '2'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检7-2</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listThreeObj.type && listThreeObj.type == '断电作业'"
          >
            {{ listThreeObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listThreeObj.type && listThreeObj.type != '断电作业'"
          >
            {{ listThreeObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listThreeObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listThreeObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listThreeObj.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listThreeObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listThreeObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listThreeObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listThreeObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listThreeObj.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listThreeObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listThreeObj.tworkRecordReVoList"
                  :key="item.id + '3'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检8-2</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listFourObj.type && listFourObj.type == '断电作业'"
          >
            {{ listFourObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listFourObj.type && listFourObj.type != '断电作业'"
          >
            {{ listFourObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFourObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFourObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listFourObj.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listFourObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listFourObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listFourObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listFourObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listFourObj.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listFourObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listFourObj.tworkRecordReVoList"
                  :key="item.id + '4'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检9-2</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listFiveObj.type && listFiveObj.type == '断电作业'"
          >
            {{ listFiveObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listFiveObj.type && listFiveObj.type != '断电作业'"
          >
            {{ listFiveObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFiveObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listFiveObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listFiveObj.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listFiveObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listFiveObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listFiveObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listFiveObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listFiveObj.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listFiveObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listFiveObj.tworkRecordReVoList"
                  :key="item.id + '5'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="overhaul-box">
        <div class="title">
          <p class="check-no">检10-2</p>

          <p
            class="check-no"
            style="margin-left: 35px"
            v-if="listSixObj.type && listSixObj.type == '断电作业'"
          >
            {{ listSixObj.type }}
          </p>
          <p
            class="check-no"
            style="margin-left: 35px; color: red"
            v-if="listSixObj.type && listSixObj.type != '断电作业'"
          >
            {{ listSixObj.type }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listSixObj.twoStartState }}
          </p>
          <p class="check-no" style="color: red; margin-left: 15px">
            {{ listSixObj.twoEndState }}
          </p>
        </div>
        <div class="check-middle">
          <div class="check-top">
            <div class="check-text">车号：</div>
            <div class="check-num">{{ listSixObj.carCode || "/" }}</div>
            <div class="start-time-text">开始时间：</div>
            <div class="start-time">{{ listSixObj.startTime || "/" }}</div>
            <div class="duration">总时长：</div>
            <div class="duration-time">{{ listSixObj.duration || "/" }}</div>
            <div class="duration">计划时间：</div>
            <div class="duration-times">{{ listSixObj.planTime || "/" }}</div>
          </div>
          <div>
            <span class="team shopPad">班组：</span>
            <vue-seamless-scroll
              :data="listSixObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  :class="classS1(item.workTeamName.length)"
                  v-for="(item, index) in listSixObj.tworkRecordReVoList"
                  :key="item.id + index"
                >
                  {{ item.workTeamName }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div>
            <span class="team">时间：</span>
            <vue-seamless-scroll
              :data="listSixObj.tworkRecordReVoList"
              :class-option="seamlessScrollOption"
              class="warp"
            >
              <ul class="ul-item">
                <li
                  v-for="item in listSixObj.tworkRecordReVoList"
                  :key="item.id + '6'"
                  class="duration-num"
                  :class="classS1(item.workTeamName.length)"
                >
                  {{ item.startShortTime }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopsList } from "@/api/daping/daping";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  name: "workshop_xc",
  data() {
    return {
      timer: null,
      scrollTime: null,
      scrollW: 0, //记录滚动到哪了
      items: [],
      animate: false,
      newFiveList: [],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      listArr: [],
      listObj: { carCode: "", startTime: "", duration: "", type: "" },
      listTwoArr: [],
      listTwoObj: { carCode: "", startTime: "", duration: "", type: "" },
      listThreeArr: [],
      listThreeObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFourArr: [],
      listFourObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFiveArr: [],
      listFiveObj: { carCode: "", startTime: "", duration: "", type: "" },
      listSixObj: { carCode: "", startTime: "", duration: "", type: "" },

      listObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      listSixArr: [],
      listTwoObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      listSevenArr: [],
      listThreeObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      listEightArr: [],
      listFourObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      listFiveObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      listSixObjRight: { carCode: "", startTime: "", duration: "", type: "" },
      flag: false,
      flagTwo: false,
      flagThree: false,
      flagFour: false,
      flagFive: false,
      flagSix: false,
      flagSeven: false,
      flagEight: false,
    };
  },
  mounted() {
    // this.getShopsList();
    // this.getShopsList2();
    // this.getShopsList3();
    // this.getShopsList4();
    // this.getShopsList5();
    // this.getShopsList6();
    // this.getShopsListRight();
    // this.getShopsListRight2();
    // this.getShopsListRight3();
    // this.getShopsListRight4();
    // this.getShopsListRight5();
    // this.getShopsListRight6();
    // this.settimedata();

    Promise.all([
      this.getShopsList(),
      this.getShopsList2(),
      this.getShopsList3(),
      this.getShopsList4(),
      this.getShopsList5(),
      this.getShopsList6(),
      this.getShopsListRight(),
      this.getShopsListRight2(),
      this.getShopsListRight3(),
      this.getShopsListRight4(),
      this.getShopsListRight5(),
      this.getShopsListRight6(),
    ]).then((res) => {
      this.settimedata();
    });
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  destroyed() {
    this.timer = null;
    clearInterval(this.timer);
  },
  methods: {
    classS1(length) {
      let v = [];
      if (length <= 5) {
        v.push("team-num");
      }
      if (length == 6) {
        v.push("team-numsix");
      }
      if (length >= 7) {
        v.push("team-numseven");
      }
      return v;
    },
    settimedata() {
      this.timer = setInterval(() => {
        Promise.all([
          this.getShopsList(),
          this.getShopsList2(),
          this.getShopsList3(),
          this.getShopsList4(),
          this.getShopsList5(),
          this.getShopsList6(),
          this.getShopsListRight(),
          this.getShopsListRight2(),
          this.getShopsListRight3(),
          this.getShopsListRight4(),
          this.getShopsListRight5(),
          this.getShopsListRight6(),
        ]).then((res) => {});
      }, 1000 * 30);
    },
    // 检11-2
    getShopsList() {
      return new Promise((resolve) => {
        let params = {
          complete: 2,
          trackId: 1,
        };
        shopsList(params).then((res) => {
          this.listArr = res.rows;
          if (res.rows.length > 0) {
            this.listObj = res.rows[0];
          } else {
            this.listObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检12-2
    getShopsList2() {
      return new Promise((resolve) => {
        let params2 = {
          complete: 2,
          trackId: 2,
        };
        shopsList(params2).then((res) => {
          this.listTwoArr = res.rows;
          if (res.rows.length > 0) {
            this.listTwoObj = res.rows[0];
          } else {
            this.listTwoObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检13-2
    getShopsList3() {
      return new Promise((resolve) => {
        let params3 = {
          complete: 2,
          trackId: 3,
        };
        shopsList(params3).then((res) => {
          this.listThreeArr = res.rows;
          if (res.rows.length > 0) {
            this.listThreeObj = res.rows[0];
          } else {
            this.listThreeObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检14-2
    getShopsList4() {
      return new Promise((resolve) => {
        let params4 = {
          complete: 2,
          trackId: 4,
        };
        shopsList(params4).then((res) => {
          this.listFourArr = res.rows;
          if (res.rows.length > 0) {
            this.listFourObj = res.rows[0];
          } else {
            this.listFourObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检15-2
    getShopsList5() {
      return new Promise((resolve) => {
        let params = {
          complete: 2,
          trackId: 5,
        };
        shopsList(params).then((res) => {
          if (res.rows.length > 0) {
            this.listFiveObj = res.rows[0];
          } else {
            this.listFiveObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检16-2
    getShopsList6() {
      return new Promise((resolve) => {
        let params = {
          complete: 2,
          trackId: 6,
        };
        shopsList(params).then((res) => {
          if (res.rows.length > 0) {
            this.listSixObj = res.rows[0];
          } else {
            this.listSixObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检11-1
    getShopsListRight() {
      return new Promise((resolve) => {
        let params5 = {
          complete: 1,
          trackId: 1,
        };

        shopsList(params5).then((res) => {
          this.listFiveArr = res.rows;
          if (res.rows.length > 0) {
            this.listObjRight = res.rows[0];
          } else {
            this.listObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检12-1
    getShopsListRight2() {
      return new Promise((resolve) => {
        let params6 = {
          complete: 1,
          trackId: 2,
        };

        shopsList(params6).then((res) => {
          this.listSixArr = res.rows;
          if (res.rows.length > 0) {
            this.listTwoObjRight = res.rows[0];
          } else {
            this.listTwoObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检13-1
    getShopsListRight3() {
      return new Promise((resolve) => {
        let params7 = {
          complete: 1,
          trackId: 3,
        };

        shopsList(params7).then((res) => {
          this.listSevenArr = res.rows;
          if (res.rows.length > 0) {
            this.listThreeObjRight = res.rows[0];
          } else {
            this.listThreeObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检14-1
    getShopsListRight4() {
      return new Promise((resolve) => {
        let params8 = {
          complete: 1,
          trackId: 4,
        };

        shopsList(params8).then((res) => {
          this.listEightArr = res.rows;
          if (res.rows.length > 0) {
            this.listFourObjRight = res.rows[0];
          } else {
            this.listFourObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检15-1
    getShopsListRight5() {
      return new Promise((resolve) => {
        let params = {
          complete: 1,
          trackId: 5,
        };

        shopsList(params).then((res) => {
          if (res.rows.length > 0) {
            this.listFiveObjRight = res.rows[0];
          } else {
            this.listFiveObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检16-1
    getShopsListRight6() {
      return new Promise((resolve) => {
        let params = {
          complete: 1,
          trackId: 6,
        };

        shopsList(params).then((res) => {
          if (res.rows.length > 0) {
            this.listSixObjRight = res.rows[0];
          } else {
            this.listSixObjRight = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // // 检11-2 更新数据
    // orderShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsList();
    //   }, 1000 * 10);
    // },
    // // 检12-2 更新数据
    // orderTwoShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsList2();
    //   }, 1000 * 10);
    // },
    // // 检13-2 更新数据
    // orderThreeShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsList3();
    //   }, 1000 * 10);
    // },
    // // 检14-2 更新数据
    // orderFourShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsList4();
    //   }, 1000 * 10);
    // },
    // // 检11-1 更新数据
    // orderFiveShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsListRight();
    //   }, 1000 * 10);
    // },
    // // 检12-1 更新数据
    // orderSixShow() {
    //   let timer = setInterval(() => {
    //     this.getShopsListRight2();
    //   }, 1000 * 10);
    // },
    // // 检13-1 更新数据
    // orderSevenShow(arr) {
    //   let timer = setInterval(() => {
    //     this.getShopsListRight3();
    //   }, 1000 * 10);
    // },
    // // 检14-1 更新数据
    // orderEightShow(arr) {
    //   let timer = setInterval(() => {
    //     this.getShopsListRight4();
    //   }, 1000 * 10);
    // },
  },
};
</script>
<style lang="scss" scoped>
// .shopPad{
//   padding-right: 36px;
// }
#box {
  width: 100%;
}
.anim {
  // transition: all 0.5s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
.warp {
  width: 825px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 150px;
        height: 120px;
        margin-right: 10px;
        line-height: 120px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
.app-container {
  min-width: 1900px;
  height: 1080px;
  background-color: #003567;
  padding: 10px !important;
  .grid-content {
    display: inline-block;
    width: calc(50% - 3px);
    height: 100%;
    &:first-child {
      margin-right: 6px;
    }
    .overhaul-box {
      width: 100%;
      height: calc(16.7% - 6px);
      background-color: #010f3a;
      margin-bottom: 6px;
      font-size: 18px;
      line-height: 30px;

      .title {
        display: flex;
        justify-content: center;
        height: 32px;
        line-height: 32px;
        background: url("../assets/images/line.png") 0 100% no-repeat;
        background-color: #021347;
        .check-no {
          // width: 50%;
          font-size: 24px;
          font-weight: 600;
          color: #00ff6c;
          letter-spacing: 1px;
          margin: 0;
          // &:first-child {
          //   text-align: right;
          // }
          // &:last-child {
          //   text-align: left;
          // }
        }
      }
      .check-top {
        display: flex;
        margin-top: 5px;
        .check-text,
        .start-time-text,
        .duration {
          font-size: 16px;
          margin-left: 5px;
          color: #fff;
          letter-spacing: 2px;
        }
        .check-num,
        .start-time,
        .duration-time,
        .duration-times {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          background-color: #003567;
          text-align: center;
          color: #fff;
        }
        .duration-times {
          width: 175px;
        }
        .duration-time {
          width: 100px;
        }
        .check-num {
          width: 210px;
        }
        .start-time {
          width: 100px;
        }
      }
      .check-middle {
        height: calc(100% - 32px);
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        > div:not(.check-top) {
          display: flex;
          width: 100%;
          height: 30px;
          margin-top: 3px;
        }
        .team,
        .duration-text {
          font-size: 16px;
          color: #fff;
          margin-left: 5px;
          letter-spacing: 2px;
        }
        .team-num,
        .duration-num,
        .team-numseven,
        .team-numsix {
          display: inline-block;
          background-color: #003567;
          text-align: center;
          color: #fff;
          height: 30px;
          line-height: 30px;
        }
        .team-num,
        .duration-num {
          width: 160px;
        }
        .team-numseven {
          width: 207px;
        }
        .team-numsix {
          width: 190px;
        }
        .duration-num {
          text-align: center;
          background-color: #020f3b;
          color: #fff;
        }
      }
      .check-bottom {
        padding: 0 20px;
      }
    }
  }
}
</style>
